<template>
  <div id="allmap" style="height: 650px">
    <baidu-map style="height: 100%" class="bm-view" :center="center" :zoom="zoom" @ready="handler" />
  </div>
</template>

<script>
export default {
  name: 'CrmCusVisitMap',
  props: {
    // 绑定值
    onGPS: [Array],
    value: [String, Number],
    info: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      center: {lng:116.407526, lat:39.904030},
      zoom: 5
    }
  },
  watch: {
    onGPS(value) {
      var map = new BMap.Map('allmap')// 显示标签
      var point = new BMap.Point( value[0], value[1])

      map.addControl(new BMap.MapTypeControl())
      map.enableScrollWheelZoom(true)// 启用滚轮放大缩小，默认禁用
      map.enableContinuousZoom() // 启用地图惯性拖拽，默认禁用
      map.enableDoubleClickZoom(true)
      var marker = new BMap.Marker(point)

      map.addOverlay(marker)

      map.centerAndZoom(point, 15)// 初始化地图,设置城市和地图级别。
      map.centerAndZoom(point, 14)// 初始化地图,设置城市和地图级别。
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.centerDialogVisibleOn = this.centerDialogVisible
    })
  },
  methods: {
    handler({ BMap }) {
      var map = new BMap.Map('allmap')// 显示标签
      var point = new BMap.Point( 121.420757, 28.656386)

      map.addControl(new BMap.MapTypeControl())
      map.enableScrollWheelZoom(true)// 启用滚轮放大缩小，默认禁用
      map.enableContinuousZoom() // 启用地图惯性拖拽，默认禁用
      map.enableDoubleClickZoom(true)
      var marker = new BMap.Marker(point)

      map.addOverlay(marker)

      map.centerAndZoom(point, 15)// 初始化地图,设置城市和地图级别。
      map.centerAndZoom(point, 14)// 初始化地图,设置城市和地图级别。
    },
    onClose() {
      this.$emit('onCenterDialogVisible', 0)
    }
  }
}
</script>

<style scoped>
  .bm-view {
    width: 100%;
    height: 400px;
  }
</style>
